<script setup lang="ts">
import { useRouter } from "vue-router";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  subTitle: {
    type: String,
    default: "",
  },
  tipsText: {
    type: String,
    default: "",
  },
  moreUrl: {
    type: String,
    default: "",
  },
  recommendingData: {
    type: Object,
    default: () => {},
  },
});

const router = useRouter();
const toMore = () => {
  if (props.recommendingData.id) {
    router.push(`/commodity?goodsTypeId=${props.recommendingData.id}`);
  }
};
</script>

<template>
  <div class="Recommending-title">
    <span class="tip">{{ tipsText }}</span>
    <div class="title-box">
      <span class="title"
        >{{ title }} <span class="sub-title" v-if="subTitle">{{ subTitle }}</span></span
      >
      <nuxt-link v-if="moreUrl" class="more-a" :to="moreUrl" @click="toMore">
        <span>查看更多</span>
        <img src="~/assets/check-more-icon-2.png" alt="" />
      </nuxt-link>
    </div>
  </div>
</template>

<style scoped lang="scss">
.Recommending-title {
  position: relative;
  height: 60px;
  margin-bottom: 24px;
  .tip {
    position: absolute;
    font-weight: 800;
    font-size: 32px;
    color: rgba(19, 84, 78, 0.04);
    line-height: 38px;
    text-transform: uppercase;
  }
}
.title-box {
  display: flex;
  padding-top: 20px;
  .title {
    flex: 1;
    font-size: 24px;
    color: #191e28;
    font-weight: bold;
    display: flex;
    align-items: center;
    .sub-title {
      color: rgba(25, 30, 40, 0.36);
      font-size: 16px;
      padding-left: 16px;
      text-transform: uppercase;
    }
  }
}
.more-a {
  display: flex;
  align-items: center;
  font-size: 16px;
  text-decoration: none;
  span {
    font-size: 16px;
    color: rgba(25, 30, 40, 0.48);
    margin-right: 8px;
  }
  img {
    width: 7px;
    height: 12px;
  }
}
</style>
